<template>
  <div class="card">
    <a-form-model layout="inline">
      <a-form-model-item>
        <a-button @click="addEdit()">新建</a-button>
      </a-form-model-item>
    </a-form-model>

    <a-spin :spinning="loading" style="padding-top: 10px">
      <a-table
        bordered
        :scroll="{ x: 1000 }"
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change=";(pagination = $event), getDataList()"
      >
        <template slot="type" slot-scope="text">
          <a-tag color="blue" class="statusStyle" v-if="text == 1">正常</a-tag>
        </template>
        <span slot="image" slot-scope="text">
          <viewer :images="[text]">
            <img width="50px" height="50px" :src="text" alt="" />
          </viewer>
        </span>
        <span slot="erweima" slot-scope="text">
          <creatQrCode :qrText="text"></creatQrCode>
        </span>
        <span slot="operate" slot-scope="text, record">
          <a-button type="link" @click="showEdit(record)">编辑</a-button>
        </span>
      </a-table>
    </a-spin>
    <editTable ref="editTable" @changes="getBrandList"></editTable>
  </div>
</template>

<script>
import { getBrandListApi } from '@/api/brand.js'
import editTable from './diogla/editTable.vue'
export default {
  name: 'list',
  components: {
    editTable
  },
  data() {
    return {
      loading: false,
      tableData: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 50
      },
      columns: [
        {
          title: '品牌名字',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '品牌标识',
          dataIndex: 'mark',
          align: 'center'
        },
        {
          title: 'APP标识',
          dataIndex: 'app_mark',
          align: 'center'
        },
        {
          title: '默认头像',
          dataIndex: 'default_avatar',
          align: 'center',
          scopedSlots: { customRender: 'image' }
        },
        {
          title: '注册地址',
          dataIndex: 'h5_url',
          align: 'center',
          scopedSlots: { customRender: 'erweima' }
        },
        {
          title: '下载地址',
          dataIndex: 'static_url',
          align: 'center',
          scopedSlots: { customRender: 'erweima' }
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '创建时间',
          dataIndex: 'ctime',
          align: 'center',
          scopedSlots: { customRender: 'time' }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  created() {
    this.getBrandList()
  },
  computed: {},
  methods: {
    async getBrandList() {
      this.loading = true
      try {
        const { data } = await getBrandListApi({ brand_id: process.env.VUE_APP_BRAND_ID, search: { type: this.type } })
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    },
    showEdit(jsons) {
      this.$refs.editTable.openEditTable(jsons)
    },
    addEdit() {
      this.$refs.editTable.openEditTable()
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
</style>
